page {
    // background-color: #F5F5F5;
}

.search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    padding: 0 30rpx;
    background-color: #fff;

    .search-view {
        width: 100%;
        height: 70rpx;

        .search-input {
            width: 88%;
            height: 100%;
            background-color: #EDF5FF;
            border-radius: 35rpx;

            .icon-sousuo {
                background-image: linear-gradient(to bottom, #EDF5FF, #7D9BFF);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            input {
                height: 100%;
                color: #869DB9;
                font-size: 30rpx;
            }

            .ph-c {
                color: #869DB9;
            }
        }

        .search-btn {
            width: 10%;
            text-align: center;
            line-height: 70rpx;
            // font-style: italic;
            // text-shadow: 4rpx 0 2rpx #869DB9;
        }
    }
}

.search-body {
    margin-top: 140rpx;
    height: calc(100vh - 140rpx);

    .search-history {
        .search-history-title {
            .search-history-title-text {
                &::after {
                    box-sizing: content-box;
                    display: block;
                    content: "";
                    width: 100%;
                    height: 16rpx;
                    margin-top: -20rpx;
                    background-image: linear-gradient(to right, #7D9BFF, #EDF5FF);
                    opacity: 1;
                    border-radius: 10rpx;
                }
            }
        }

        .search-history-content {
            overflow: hidden;

            .search-history-content-item {
                float: left;
                height: 52rpx;
                text-align: center;
                line-height: 44rpx;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                padding: 5rpx 30rpx;
                color: #666;
                font-size: 24rpx;
                box-sizing: border-box;
                background-color: #eee;
                border-radius: 4rpx;
            }
        }
    }

    .rank {
        .rank-title {
            .rank-title-text {
                &::after {
                    box-sizing: content-box;
                    display: block;
                    content: "";
                    width: 100%;
                    height: 16rpx;
                    margin-top: -20rpx;
                    background-image: linear-gradient(to right, #7D9BFF, #EDF5FF);
                    opacity: 1;
                    border-radius: 10rpx;
                }
            }
        }

        .rank-scroll-view {
            white-space: nowrap;
            width: 100%;
            height: 770rpx;

            .rank-scroll-view-item {
                display: inline-flex;
                flex-direction: column;
                width: 400rpx;
                border-radius: 15rpx;
                box-shadow: 0 0 12rpx rgb(245, 245, 245, 0.5);

                &:nth-of-type(1) {
                    margin-left: 30rpx;

                    .rank-name {
                        background-image: linear-gradient(to right, #E7CAFF, #F2E4FF, #FAF0FF);

                        .icon-jiangpaipaiming {
                            // color: #FDB1E6;
                            background-image: linear-gradient(45deg, #F567B7, #FDB1E6);
                        }

                        .rankName {
                            color: #F41A7B;
                        }
                    }
                }

                &:nth-of-type(2) {
                    .rank-name {
                        background-image: linear-gradient(to right, #FFDBE3, #FFDFD2, #FFF1F1);

                        .icon-jiangpaipaiming {
                            // color: #FFCB9D;
                            background-image: linear-gradient(45deg, #FBA56B, #FFCB9D);
                        }

                        .rankName {
                            color: #F15A32;
                        }
                    }
                }

                &:nth-of-type(3) {
                    .rank-name {
                        background-image: linear-gradient(to right, #FEF9E2, #FAE9C9, #FDF3E0);

                        .icon-jiangpaipaiming {
                            // color: #FFCB9D;
                            background-image: linear-gradient(45deg, #FAA56B, #FCBE8C);
                        }

                        .rankName {
                            color: #DA700B;
                        }
                    }
                }

                &:nth-of-type(4) {
                    .rank-name {
                        background-image: linear-gradient(to right, #E2DBFF, #E6EAFF, #EFE6FE);

                        .icon-jiangpaipaiming {
                            // color: #E9D1FF;
                            background-image: linear-gradient(45deg, #C7B2F9, #E9D1FF);
                        }

                        .rankName {
                            color: #9532F1;
                        }
                    }
                }


                .rank-name {
                    width: 100%;
                    height: 70rpx;
                    border-radius: 15rpx 15rpx 0 0;

                    .icon-jiangpaipaiming {
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                    }

                    .rankName {
                        font-style: italic;
                    }
                }

                .rank-list {
                    width: 100%;
                    overflow: hidden;

                    .rank-list-item {
                        height: 67rpx;
                        border-bottom: 1rpx solid #F2F2F2;

                        &:last-child {
                            border-bottom: none;
                        }

                        .rank-num {
                            width: 30rpx;
                            height: 30rpx;
                            text-align: center;
                            line-height: 30rpx;
                            border-radius: 2rpx;
                            color: #ECD4D4;
                        }

                        .rank-num-one {
                            color: #FFF;
                            background-image: linear-gradient(to bottom, #FE6969, #FE2E2E);
                        }

                        .rank-num-two {
                            color: #FFF;
                            background-image: linear-gradient(to bottom, #FF9469, #FF6C43);
                        }

                        .rank-num-three {
                            color: #FFF;
                            background-image: linear-gradient(to bottom, #FFC576, #FF9938);
                        }

                        .movieTitle {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}



// 加载
.searching {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}